import React, { useState } from 'react';
import { motion } from 'framer-motion';
import { toast, toastSuccess, toastError, toastWarning, toastInfo, toastSilent } from '@/lib/toast-with-audio';

/**
 * 检查音频设置是否启用
 * 从 localStorage 获取音频设置
 */
function getAudioSettings(): { enabled: boolean; volume: number } {
  try {
    const saved = localStorage.getItem('audio-settings');
    if (saved) {
      const settings = JSON.parse(saved);
      return {
        enabled: settings.enabled ?? true,
        volume: settings.volume ?? 0.3
      };
    }
  } catch (error) {
    console.warn('获取音频设置失败:', error);
  }
  
  // 默认设置
  return {
    enabled: true,
    volume: 0.3
  };
}

export default function ToastDemo() {
  const [volume, setVolume] = useState(30);
  const audioSettings = getAudioSettings();

  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800 p-6">
      <div className="max-w-4xl mx-auto">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5 }}
          className="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-8"
        >
          <div className="text-center mb-8">
            <h1 className="text-3xl font-bold text-gray-800 dark:text-white mb-2">
              <i className="fa-solid fa-bell text-blue-500 mr-3"></i>
              Toast 音频演示
            </h1>
            <p className="text-gray-600 dark:text-gray-300">测试不同类型的 toast 提示音效果 - 音频设置绑定系统通知设置</p>
          </div>

          {/* 音频设置状态显示 */}
          <div className="mb-6 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-700 rounded-xl">
            <div className="flex items-center justify-between">
              <div>
                <h3 className="text-lg font-semibold text-blue-700 dark:text-blue-300 mb-1">
                  <i className="fa-solid fa-info-circle mr-2"></i>
                  音频设置状态
                </h3>
                <p className="text-blue-600 dark:text-blue-400 text-sm">
                  {audioSettings.enabled 
                    ? "✅ 音频通知已启用 - toast 将播放提示音" 
                    : "🔇 音频通知已禁用 - toast 将静默显示"}
                </p>
              </div>
              <button
                onClick={() => window.location.href = '/#/settings'}
                className="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm hover:bg-blue-700"
              >
                前往设置
              </button>
            </div>
            <p className="text-blue-500 dark:text-blue-400 text-xs mt-2">
              提示：如需启用/禁用音频通知，请前往系统设置页面调整"音频通知"开关
            </p>
          </div>

          {/* 音量控制 */}
          <div className="mb-8 p-6 bg-gray-50 dark:bg-gray-700/50 rounded-xl">
            <h2 className="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-4">
              <i className="fa-solid fa-volume-up text-green-500 mr-2"></i>
              音量控制
            </h2>
            <div className="flex items-center space-x-4">
              <span className="text-gray-700 dark:text-gray-200 min-w-[80px]">音量: {volume}%</span>
              <input
                type="range"
                min="0"
                max="100"
                value={volume}
                onChange={(e) => setVolume(parseInt(e.target.value))}
                className="flex-1 h-2 bg-gray-200 dark:bg-gray-600 rounded-lg appearance-none cursor-pointer"
              />
              <button
                onClick={() => setVolume(30)}
                className="px-3 py-1 bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-300 rounded-lg text-sm hover:bg-blue-200 dark:hover:bg-blue-800/50"
              >
                重置
              </button>
            </div>
            <p className="text-sm text-gray-500 dark:text-gray-400 mt-2">
              当前音量: {volume}% - 调整音量后点击下方按钮测试效果
              {!audioSettings.enabled && (
                <span className="text-red-500 dark:text-red-400 ml-2">(音频通知已禁用，不会播放声音)</span>
              )}
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            {/* 默认 Toast */}
            <div className="bg-white dark:bg-gray-700 rounded-lg shadow-sm border border-gray-200 dark:border-gray-600 p-4">
              <h3 className="text-lg font-semibold text-gray-800 dark:text-white mb-2">默认提示</h3>
              <p className="text-sm text-gray-600 dark:text-gray-300 mb-3">播放默认消息提示音</p>
              <button 
                className="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg transition-colors w-full"
                onClick={() => toast('这是一个默认提示消息', { volume: volume / 100 })}
              >
                播放默认提示
              </button>
            </div>

            {/* 成功 Toast */}
            <div className="bg-white dark:bg-gray-700 rounded-lg shadow-sm border border-gray-200 dark:border-gray-600 p-4">
              <h3 className="text-lg font-semibold text-gray-800 dark:text-white mb-2">成功提示</h3>
              <p className="text-sm text-gray-600 dark:text-gray-300 mb-3">播放成功提示音</p>
              <button 
                className="bg-green-600 hover:bg-green-700 text-white py-2 px-4 rounded-lg transition-colors w-full"
                onClick={() => toastSuccess('操作成功完成！', { volume: volume / 100 })}
              >
                播放成功提示
              </button>
            </div>

            {/* 错误 Toast */}
            <div className="bg-white dark:bg-gray-700 rounded-lg shadow-sm border border-gray-200 dark:border-gray-600 p-4">
              <h3 className="text-lg font-semibold text-gray-800 dark:text-white mb-2">错误提示</h3>
              <p className="text-sm text-gray-600 dark:text-gray-300 mb-3">播放错误提示音</p>
              <button 
                className="bg-red-600 hover:bg-red-700 text-white py-2 px-4 rounded-lg transition-colors w-full"
                onClick={() => toastError('操作失败，请重试！', { volume: volume / 100 })}
              >
                播放错误提示
              </button>
            </div>

            {/* 警告 Toast */}
            <div className="bg-white dark:bg-gray-700 rounded-lg shadow-sm border border-gray-200 dark:border-gray-600 p-4">
              <h3 className="text-lg font-semibold text-gray-800 dark:text-white mb-2">警告提示</h3>
              <p className="text-sm text-gray-600 dark:text-gray-300 mb-3">播放警告提示音</p>
              <button 
                className="bg-yellow-600 hover:bg-yellow-700 text-white py-2 px-4 rounded-lg transition-colors w-full"
                onClick={() => toastWarning('请注意操作风险！', { volume: volume / 100 })}
              >
                播放警告提示
              </button>
            </div>

            {/* 信息 Toast */}
            <div className="bg-white dark:bg-gray-700 rounded-lg shadow-sm border border-gray-200 dark:border-gray-600 p-4">
              <h3 className="text-lg font-semibold text-gray-800 dark:text-white mb-2">信息提示</h3>
              <p className="text-sm text-gray-600 dark:text-gray-300 mb-3">播放信息提示音</p>
              <button 
                className="bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded-lg transition-colors w-full"
                onClick={() => toastInfo('系统有新消息通知', { volume: volume / 100 })}
              >
                播放信息提示
              </button>
            </div>

            {/* 静默 Toast */}
            <div className="bg-white dark:bg-gray-700 rounded-lg shadow-sm border border-gray-200 dark:border-gray-600 p-4">
              <h3 className="text-lg font-semibold text-gray-800 dark:text-white mb-2">静默提示</h3>
              <p className="text-sm text-gray-600 dark:text-gray-300 mb-3">不播放提示音</p>
              <button 
                className="bg-gray-600 hover:bg-gray-700 text-white py-2 px-4 rounded-lg transition-colors w-full"
                onClick={() => toastSilent('这是一个静默提示')}
              >
                播放静默提示
              </button>
            </div>

            {/* 实际应用场景 */}
            <div className="bg-white dark:bg-gray-700 rounded-lg shadow-sm border border-gray-200 dark:border-gray-600 p-4 md:col-span-2">
              <h3 className="text-lg font-semibold text-gray-800 dark:text-white mb-2">实际应用场景</h3>
              <p className="text-sm text-gray-600 dark:text-gray-300 mb-3">模拟真实业务场景中的提示音</p>
              <div className="grid grid-cols-2 gap-2">
                <button 
                  className="bg-green-600 hover:bg-green-700 text-white py-2 px-4 rounded-lg transition-colors"
                  onClick={() => toastSuccess('用户状态已启用', { volume: volume / 100 })}
                >
                  启用用户
                </button>
                <button 
                  className="bg-red-600 hover:bg-red-700 text-white py-2 px-4 rounded-lg transition-colors"
                  onClick={() => toastError('用户状态已禁用', { volume: volume / 100 })}
                >
                  禁用用户
                </button>
                <button 
                  className="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg transition-colors"
                  onClick={() => toastSuccess('任务已创建成功', { volume: volume / 100 })}
                >
                  创建任务
                </button>
                <button 
                  className="bg-yellow-600 hover:bg-yellow-700 text-white py-2 px-4 rounded-lg transition-colors"
                  onClick={() => toastWarning('任务即将逾期', { volume: volume / 100 })}
                >
                  任务提醒
                </button>
              </div>
            </div>
          </div>

          <div className="mt-8 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-700 rounded-lg p-4">
            <h3 className="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-2">功能说明</h3>
            <ul className="text-sm text-blue-700 dark:text-blue-300 space-y-1">
              <li>• 不同类型的 toast 会播放不同的提示音</li>
              <li>• 成功提示：清脆的中音（800Hz）</li>
              <li>• 错误提示：低沉的音调（400Hz）</li>
              <li>• 警告提示：短促的高音（1000Hz）</li>
              <li>• 默认/信息提示：类似微信的"叮"声（600Hz）</li>
              <li>• 支持自定义音量控制（0-1）</li>
              <li>• 支持静默模式（不播放提示音）</li>
              <li>• <strong>自动绑定系统音频设置</strong> - 关闭音频通知时 toast 将静默显示</li>
            </ul>
          </div>
        </motion.div>
      </div>
    </div>
  );
}